<include file="public@solution_head">
<div class="container-fluid">
    <div class="case-banner mb-4">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/plan_banner01.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/plan_banner01.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/plan_banner01.jpg" alt=""></a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <section class="loading-list plan-list cis-animate-body">
        <div id="cis-product-list" class="row">
        <!--循环开始-->
        <php>$category_ids=12;</php>
        <portal:articles limit="" order="post.published_time DESC" categoryIds="$category_ids">
        <div class="col-xs-12 col-sm-6 col-md-3 mb-3 invisible" data-plugin="appear" data-animate="slide-bottom">
          <div class="card">
            <div class="card-img-top">
              <figure class="figure">
                <a href="{:url('portal/Article/index',array('id'=>$vo['id'],'cid'=>$vo.category_id))}">
                <if condition="empty($vo.more.thumbnail)">
                <img src="__TMPL__/public/assets/images/default_tupian4.png" class="img-fluid" alt="{$vo.post_title}"/>
                <else/>
                <img src="{:cmf_get_image_url($vo.more.thumbnail)}" class="img-fluid" alt="{$vo.post_title}"/>
                </if>
                </a>
              </figure>
            </div>
            <div class="card-body card-plan-body">
              <h5 class="card-code-line">01</h5>
              <h6 class="card-title-line"><a href="detail.html">{$vo.post_title}</a></h6>
              <p class="card-text">
                {$vo.post_content}
              </p>
            </div>
            <div class="card-footer">
                <p class="card-text">
                {$vo.post_keywords}
                <span class="float-right"><i class="iconcis icon-eye"></i>|&nbsp;{$vo.post_hits}</span>
            </div>
          </div>
        </div>
      </portal:articles>
        <!--循环结束-->
      </div>
    </section>
</div>
<include file="public@common_footer">
<script>
    $(function () {
        var swiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });

        //初始化
        init();

        //滚动加载分页
        var winH = $(window).height();
        $(window).scroll(function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop();
            var aa = (pageH - winH - scrollT) / winH;
            if (aa < 0.02) {
                //ajax
                var str = '';
                for (var i = 0; i < 8; i++) {
                    str += `     <div class="col-xs-12 col-sm-6 col-md-3 mb-3 invisible" data-plugin="appear" data-animate="slide-bottom">
                <div class="card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="detail.html">
                                <img class="img-fluid" src="../../images/upload/plan_liat01.jpg">
                            </a>
                        </figure>
                    </div>
                    <div class="card-body card-plan-body">
                        <h5 class="card-code-line">01</h5>
                        <h6 class="card-title-line"><a href="detail.html">公司互联网+的超额回报操作范本</a></h6>
                        <p class="card-text">
                            不断致力于为求安秋建筑提供全套节能创新型门窗解决方案。不紧帮助美化不断致力于为求安秋建筑提供全套节能创新型门窗解决方案。不紧帮助美化。
                        </p>
                    </div>
                    <div class="card-footer">
                        <p class="card-text">
                            解决方案|企业品牌形象策划
                            <span class="float-right"><i class="iconcis icon-eye"></i>|&nbsp;2580</span>
                        </p>
                    </div>
                </div>
            </div>
        `
                }
                $("#cis-product-list").append(str);
                console.log(str)
                init();//重新初始化
            }
        });
    });
    function init() {
        METUI_FUN['loading-list'] = {
            name: 'loading-list',
            appear: function () {
                var indexappear = $('.cis-animate-body:eq(0) [data-plugin=appear]');
                if (indexappear.length) {
                    indexappear.scrollFun(function (val) {
                        val.appearDiy();
                    }, {is_scroll: true});
                }
            }
        };
        var x = new metui(METUI_FUN['loading-list']);
    }
</script>
</body>
</html>
